<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <form action="http://www.baidu.com" method="post" multiple="multiple" accept-charset="utf-8" enctype="multipart/form-data" onchange="upload()">
    <input type="file">
    <button type="submit" onclick="submit">提交</button>
  </form>
  <ul id="parent">
    <!-- 为了模拟 写死已经上传上去的文件列表 -->
    <li id="086">086文件 <span onclick="deleteFile('086')">X<span></li>
    <li>176文件</li>
  </ul>
</form>
  

</body>
<script type="text/javascript">
function upload(event) {
  // 获取已上传的文件信息 包括文件名称和唯一标识符
  var e=window.event||event;
  var File = e.target.files[0];
  console.log(File);
  // todo 上传到服务器
}
function deleteFile(key) {
  // 模拟的文件列表，用DOM操作方法 删除某一个文件
  const parent = document.getElementById('parent')
  const child = document.getElementById(key)
  parent.removeChild(child)
  // todo 提交ajax到服务器 删除这个文件
}
function submit() {
  // 遍历获取文件列表的文件名称和唯一标识符
  // ajax批量传到后端 进行增删改查
}

// 实际开发 不会用原生的这些东西 以react开发为例 一般操作步骤如下
// 1 引入react及antdeisgn组件库(或者其他组件库)，组件库已经集成上传组件
// 2 例如上面的上传组建 Upload暴露了参数，这些参数包括 上传到哪里 上传什么文件格式 上传中上传完毕等状态等
// 3 根据文档配置 上传url、文件格式等，
// 4 前端改变文件列表视图：文件列表都是通过一个list map出来的jsx，对list数组做push或者remove等增删改查，数据改变驱动文件列表的视图改变
// 5 http请求后端增删改查文件：在上传组建中暴露的上传中或者上传完毕等回调方法中，处理与后端的http交互(比如通知后端对这个或者这一批文件进行增删改查)
     
</script>
</html>